<template>
  <div>
    <!-- -->
    <h1 ref="baoqiang">{{msg}}</h1>
    <div v-for="item in list" :key="item.name">
      {{item.name}}-----{{item.price}}--{{item.age}}
    </div>
     <h1>{{obj.name}}</h1>
     <h1>{{obj.sex}}</h1>
     <h1>{{obj.shengao}}</h1>
    <button @click="change">改变</button>
  </div>
</template>

<script>
// vue2的双向绑定原理，由于Object.defineProperty() 进入组件一次性递归整个data的数据
export default {
  name: '2209vueIndex',

  data() {
    return {
       msg:"你好",
       list:[
         {name:"奔驰",price:1888},
         {name:"小米",price:1999},
       ],
       obj:{
        name:1,
        age:2
       }
    };
  },
  created() {
      // 如果在created想操作dom和初始化一些插件
      this.$nextTick(()=>{
        console.log(this.$refs.baoqiang.innerHTML)
      }) 
  },
  beforeMount() {
    
  },
  mounted() {
    
  },

  methods: {
    change(){
        this.msg="王宝强";
        // Vue是异步更新机制,不是数据改变后 立马能获取最新的dom ,如果想获取到最新的dom 
        this.$nextTick(()=>{
          console.log(this.$refs.baoqiang.innerHTML)

        })
      
   
      // vue2对数组和对象 新增数据 页面无法及时响应式
      // 的问题 提供this.$set() 解决此问题
      // this.$set()
      this.list[0].name="宝马"
      this.list[2]={
        name:"沃尔沃",
        price:1777
      }
      // -----------------------------------
      // 给数组使用this.$set(数组,下标,数据)
      this.$set(this.list,3,{
        name:"奥迪",
        price:1666
      })
      // 给对象使用$set (对象,key,value)
      this.$set(this.obj,"sex","女")
      // -------------------------------------
      this.obj.shengao=180;
      this.list[3].age=19;
      this.list[4]={
        name:"订单",
        price:1789
      }

      
    }
  },
};
</script>